<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue slot</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/pikaday/1.8.0/css/pikaday.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">

        <base-input ref="usernameInput" style="margin-top:0px;">
            <template v-slot:btn>
                <button v-on:click="focus" class="btn btn-primary">Focus</button>
            </template>
        </base-input>
    </div>
</body>
<script src="https://cdn.bootcss.com/pikaday/1.8.0/pikaday.min.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    Vue.component('navigation-link', {
        props: ['url'],
        template: `
        <a
            v-bind:href="url"
            class="nav-link"
        >
            <slot></slot>
        </a>
        `
    });
    Vue.component('font-awesome-icon', {
        props: ['name'],
        template: `
        <span class="fa" :class="iconName"></span>
        `,
        computed: {
            iconName: function () {
                return 'fa-' + this.name;
            }
        },
    });
    // 表单提交
    Vue.component('submit-button', {
        template: `
        <button type="submit"><slot></slot></button>
        `
    });

    // 模版
    Vue.component('base-layout', {

        template: `
<div class="container">
  <header>
    <slot name="header"></slot>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <slot></slot>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <slot name="footer"></slot>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>
        `
    });

    Vue.component('current-user', {
        data: function () {
            return {
                user: {
                    firstName: 'zeng',
                    lastName: 'yi'
                }
            }
        },
        template: `
        <span>
            <slot v-bind:user="user">
            {{ user.lastName }}
            </slot>
        </span>
        `
    });

    Vue.component('base-input', {
        template: `
            <div class="form-group">
                <input ref="input" class="form-control">
                <slot name="btn"></slot>
            </div>
        `,
        mounted() {
            this.attachDatePicker('input');
        },
        methods: {
            focus: function () {
                this.$refs.input.focus();
            },
            attachDatePicker: function (refName) {
                var picker = new Pikaday({
                    field: this.$refs[refName],
                    format: 'YYYY-mm-dd'
                });
                this.$once('hook:beforeDestory', function () {
                    picker.destroy();
                });
            }
        },
    });
    var app = new Vue({
        el: '#app',
        data: {

        },

        methods: {
            focus: function () {
                this.$refs.usernameInput.focus();
            },

        },

    });

</script>

</html>